<link href="/css/default/mac/grid/grid.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript" src="/js/mac/pager.min.js"></script>
<script type="text/javascript" src="/js/mac/grid.min.js"></script>
<script type="text/javascript">
$(function(){
	var gd2 = $('<div class="grid"></div>').mac('grid', {
		key: 'no',
		cols : [{
			field: 'subject', title : 'Subject', width: 150
		},{
			field: 'summary', title : 'Summary', width: 150
		},{
			field: 'debit', title : 'Debbit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.debit+'</div>';
			}
		},{
			field: 'credit', title : 'Credit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.credit+'</div>';
			}
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 20 },
			autoLoad: true
		},
		pagerLength: 10,
		onRowClick: function(){
			var ec = $(this), k = ec.attr('name');
			if(gd2.selected && ec.hasClass('selected')){
				delete gd2.selected[k];
				ec.removeClass('selected');
			}else{
				gd2.selected = gd2.selected || {};
				gd2.selected[k] = gd2.data[k];
				ec.addClass('selected');
			}
			var sl = [];
			$.each(gd2.selected, function(n, c){
				sl.push(c);
			});
			cb2.select(sl);
		},
		afterLoad: function(dd, po){
			gd2.select(cb2.selected);
		}
	});
	gd2.select = function(sl){
		var at = gd2.find('.tr').removeClass('selected');
		$.each(sl, function(n, r){
			at.filter("[name='" + r.no + "']").addClass('selected');
		});
	}
	var cb2 = $('#combo2').mac('combo', {
		keyField: 'no',
		displayField: 'subject',
		boxWidth: 490,
		boxHeight: 300,
		width: 200,
		boxEl: gd2,
		multiSelect: true,
		onOpen: function(){
			gd2.adjust();
			gd2.select(cb2.selected);
		}
	});
	$('#get2').click(function(){
		alert(JSON.stringify(cb2.selected));
	});
	$('#set2').click(function(){
		cb2.select([{
			no: 2, subject: 'Subject 002'
		},{
			no: 4, subject: 'Subject 004'
		}]);
	});
});
</script>
<div id="combo2" class="combo customCombo"></div><br/>
&nbsp;&nbsp;<button id="get2">get2</button>&nbsp;<button id="set2">set2</button>